<template>
  <div>
    <div>
      <el-form label-width="80px" class="demo-ruleForm" inline>
        <el-form-item label="关键字">
          <el-input
            type="text"
            v-model="keyword"
            placeholder="请输入关键字"
            @keyup.enter.native="search"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 5px">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reSet" style="margin-left: 8px"
            >重置查询</el-button
          >
          <el-button type="primary" @click="onhandAdd" style="margin-left: 8px"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        border
        style="width: 100%"
        :data="
          StudentList.slice(
            (currentPage - 1) * pagesize,
            currentPage * pagesize
          )
        "
      >
        <el-table-column fixed key="code" prop="code" label="学号">
        </el-table-column>

        <el-table-column fixed key="name" prop="name" label="姓名">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button size="mini" type="danger" @click="deleteData(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="StudentList.length"
        style="margin-top: 1%;"
      >
      </el-pagination>

      <el-dialog
        :title="addtitle"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="refRuleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="学号" prop="code">
            <el-input v-model="ruleForm.code"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisibleConfirm"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import ajax from "@/lib/ajax";
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
export default {
  components: {},
  data() {
    return {
      toForm: {
        name: "",
        code: "",
      },    
      aid: "", //全局id
      dialogVisible: false,
      addtitle: "添加学生",
      rules: {
        name: [
          { required: true, message: "请输入学生姓名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        code: [{ required: true, message: "请输入学号", trigger: "blur" }],
      },
      ruleForm: {
        name: "",
        code: "",
      },
      UpdateName: "",
      showModal1: false,
      keyword: "",
      currentPage: 1, //初始页
      pagesize: 5, //    每页的数据
      StudentList: [],
    };
  },
  methods: {
    //   表格接口列表
    tabList() {
      var that = this;
       ajax
            .post("/api/services/app/Student/OutPutAllStudent", {
              keyword: that.keyword,
            })
            .then(function (res) {
              console.log(res.data.result, "]]]]]]]");
              that.StudentList = res.data.result;
            })
            .catch(function () {
              console.log("error");
            });      
    },
    search() {
      this.tabList();
    },

    reSet() {
      this.keyword = "";
      this.tabList();
    },

    deleteData(index, row) {
      this.ruleForm = row; //row当前行数据，把当前行的数据赋值给 表单
      this.aid = row.id; //把id存全局
      let id = this.aid;
      console.log(this.aid);
      var that = this;
      ajax
        .post('/api/services/app/Student/DelStudent', {
          Id: id,
        })
        .then((res) =>  {
          this.$message.success("删除成功"); //删除成功消息提示
          this.tabList(); //刷新列表
        })

      
    },
    // 新增
    onhandAdd() {
      
      this.dialogVisible = true;
      this.addtitle ="新增学生";
      this.ruleForm={
        name: "",
        code: "",
      },//清空表格数据
      this.aid = ""; //把id存全局
    },
    handleClose(done) {
      this.dialogVisible = false;
    },
    // 编辑
    handleEdit(index, row) {
      console.log(index, row.id);
      this.dialogVisible = true; //显示弹框
      this.addtitle ="编辑学生";
      this.ruleForm = row; //row当前行数据，把当前行的数据赋值给 表单
      this.aid = row.id; //把id存全局
      console.log(this.aid);
    },
    // 确定
    dialogVisibleConfirm() {
      var that = this;
      // 新增接口
      if (this.aid == "") {
        console.log(that.ruleForm.code);
        ajax
          .post("/api/services/app/Student/CreateStudent", {
            Code: that.ruleForm.code,
            Name: that.ruleForm.name,
          })
          .then((res) => {
            // console.log(res,"新增")
            this.$message.success("添加成功"); //新增成功消息提示             
            this.dialogVisible = false; //关闭弹框
            this.tabList(); //刷新列表
          })
          .catch((res) => {
            console.log(JSON.stringify(res))
            this.$message.error("添加失败");
          });
      } else {
        // 修改接口
        let id = that.aid;
        console.log("---"+id)
        let params = {
          code: this.ruleForm.code,   
          Name: this.ruleForm.Name,         
        };
        ajax
          .put("/api/services/app/Student/UpdateStudent", {
            Id : id,
            Code: that.ruleForm.code,
            Name: that.ruleForm.name,
          })
          .then((res) => {
            // console.log(res,"新增")
            console.log(res, "修改");
            this.$message.success("修改成功");
            this.dialogVisible = false;
            this.tabList(); //刷新列表
          })
          .catch((res) => {
            console.log("????")
            this.$message.error("修改失败");
          });

        
      }
    },

    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },

  },
  created() {

    var that = this;
    ajax
      .post("/api/services/app/Student/OutPutAllStudent", {
        keyword: that.keyword,
      })
      .then(function (res) {
        that.StudentList = res.data.result;

        //that.$refs.myPage.ParentsToCreated(that.date1)
      });
  },
  mounted() {},

  Watch: {},
};
</script>
